import { useEffect, useState } from 'react';
import { Col, Row } from 'antd';
import { WitIcon } from '@/components/Icon/index';

interface Type {
  id: string;
  name: string;
  type: string;
  unicode: string;
  decimal: number;
}
interface Prop {
  onClick?: (e: Type) => void;
}
export const IconLIst = (props: Prop) => {
  const { onClick } = props;
  const [data, setData] = useState<Array<Type>>([]);

  useEffect(() => {
    const json = './iconData.json';
    import(json).then(res => setData(res.iconList));
  }, []);

  return (
    <div>
      <Row gutter={20} justify="start" style={{ textAlign: 'center' }}>
        {data.map(item => (
          <Col onClick={() => onClick?.(item)} key={item.id}>
            <WitIcon key={item.id} type={`icon-${item.type}`} style={{ fontSize: 30, margin: '10px 0' }} />
            <div>{item.name}</div>
          </Col>
        ))}
      </Row>
    </div>
  );
};
